<template>
	<div class="header">
		<div>
			<ul class="star">
			 	<li class="active" v-if="star<=5" v-for="n in star "></li>
			 	<li class="noactive" v-if="5-star>=0" v-for="n in 5-star "></li>
			</ul>		   
		</div>
     </div>
</template>
<script>
export default {
	data(){
		return{
		}
	},
	props:['star'],
	
};
</script>
<style lang="scss" scoped>
 @import 'src/common/styles/mixins';
  .star{
	@extend %flexbox ;
	 .active{
	 	width: px2rem(39);
	 	height: px2rem(39);
		@include backsrc("../starts/images/staryes.png");	
	}
	.noactive{
		width: px2rem(39);
	 	height: px2rem(39);
		@include backsrc("../starts/images/starno.png");	
	
	}
}
</style>
